<template>
    <div class="updata-password">
      <el-form ref="fm" :model="userData" label-width="100px" :rules="rules">
        <el-form-item label="电话号码" prop="userPhone">
          <el-input v-model="userData.userPhone"/>
        </el-form-item>
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="userData.oldPassword"/>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input  type="password" autocomplete="off" v-model="userData.newPassword"/>
        </el-form-item>
        <el-form-item  label="确认新密码" prop="confirmPassword">
          <el-input  type="password" autocomplete="off"  v-model="userData.confirmPassword"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即修改</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    export default {
        name: "UpDataPassword",
        data(){
          return{
            userData:{
              userPhone:'',
              oldPassword:'',
              newPassword:'',
              confirmPassword:''
            },
            rules:{
              userPhone: {required:true,message:'请输入电话号码',trigger:'blur'},
              oldPassword: {required:true,message:'请输入密码',trigger:'blur'},
              newPassword: {required:true,message:'请输入新密码',trigger:'blur'},
              confirmPassword: {
                validator:(rule,value,callback)=>{
                  if(value!==this.userData.newPassword){
                    return callback(new Error('两次密码输入不一致'));
                  }
                  callback();
                },trigger:'blur'
              }
            }
          };
        },
      methods:{
        onSubmit() {
          //在这里进行事件交互
          console.log(this.userData.userPhone);
          console.log(this.userData.oldPassword);
          console.log(this.userData.newPassword);
          console.log(this.userData.confirmPassword);

        },
          validate(cb){
            return this.$refs.fm.validate(cb);
          },
          clearValidate(){
            this.$refs.fm.resetFields();
            this.$refs.fm.clearValidate();
          }
      }
    }
</script>

<style scoped>

</style>
